<template>
<d2-container>
  <template slot="header">
    <div style="position: relative;">
      <label >订单（批次）浏览</label>
      <el-form  label-width="80px">
        <el-input v-model="search" placeholder="Search..." @keyup.enter.native="requestData(1)"
                  style="position: absolute; width: 250px;right: 0;top:0;"></el-input>
      </el-form>
    </div>
  </template>

  <div>
    <el-table :data="tableData" border style="width: 100vw">
      <el-table-column prop="id" label="批号" width="120"></el-table-column>
      <el-table-column prop="operator" label="操作员" width="120"></el-table-column>
      <el-table-column prop="productType" label="产品种类" width="180"></el-table-column>
      <el-table-column prop="material" label="原材料批次" width="180"></el-table-column>
      <el-table-column prop="total" label="商品总量" width="180"></el-table-column>
      <el-table-column prop="completeTime" label="完成订单时间" width="180"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
      <el-table-column prop="updateTime" label="修改时间" width="180"></el-table-column>
      <el-table-column prop="remark" label="备注" width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="scope">
          <el-popconfirm
            confirm-button-text='好的'
            cancel-button-text='不用了'
            icon="el-icon-info"
            icon-color="red"
            title="这条记录确定要删除吗？"
            @onConfirm="popConfirm(scope.row);deleteRow(scope.$index, tableData)" >
            <el-button slot="reference" type="text" size="small">删除 |</el-button>
          </el-popconfirm>
          <el-button type="text" size="small" @click="editClick(scope.row) "> 编辑 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="pages" @current-change="requestData"></el-pagination>
  </div>
  <el-dialog title="信息修改" :visible.sync="dialogFormVisible" center>
    <el-form :model="update">
      <el-form-item label="ID" :label-width="formLabelWidth" prop="id">
        <el-input v-model="update.id" disabled="true" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="操作员" :label-width="formLabelWidth" prop="operator">
        <el-input v-model="update.operator" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="产品类型" :label-width="formLabelWidth" prop="productType">
        <el-select v-model="update.productType" placeholder="请选择产品类型">
          <el-option v-for="item in update.product_category" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所需材料" :label-width="formLabelWidth" prop="material" >
        <el-select v-model="update.material" multiple placeholder="请选择">
          <el-option
            v-for="item in update.material_category"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产品总数" :label-width="formLabelWidth" prop="total">
        <el-input v-model="update.total" disabled="true"autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="完成时间" :label-width="formLabelWidth" prop="completeTime">
        <el-input v-model="update.completeTime" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
        <el-input v-model="update.remark" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>

      <el-popconfirm title="确定要修改吗？" @onConfirm="updateClick()" >
        <el-button slot="reference">提 交</el-button>
      </el-popconfirm>
    </div>
  </el-dialog>
</d2-container>
</template>

<script>
import {request} from "@/network/request";

const axios = require('axios');

export default {
  name: 'batch',
  methods: {
    //前端页面删除
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //提交按钮点击后上传修改后的数据
    updateClick() {
      let _this = this;
      let material = this.update.material[0];
      for (let i = 1; i < this.update.material.length; i++) {
        material += "," + this.update.material[i];
      }
      request({
          url: 'batch/update',
          method: 'put',
          params: {
            id: _this.update.id,
            total: _this.update.total,
            completeTime: _this.update.completeTime,
            operator: _this.update.operator,
            material: material,
            productType: _this.update.productType,
            remark: _this.update.remark
          }
        },
        res => {
          console.log(res);
          if (res.data === false) {
            alert("修改失败！请重试！");
          } else {
            alert("成功修改！");
            _this.dialogFormVisible = false;
            _this.requestData()
          }
        },
        err => {
          console.log(err);
        }
      );

    },
    //确认删除按钮
    popConfirm(row) {
      request({
          url: 'batch/del',
          method: 'delete',
          params: {
            id: row.id
          }
        }, res => {
          console.log(res);
        }, err => {
          console.log(err);
        }
      );
    },
    //编辑表单传参
    editClick(row) {
      this.dialogFormVisible = true;
      this.update.id = row.id;
      this.update.total = row.total;
      this.update.completeTime = row.completeTime;
      this.update.operator = row.operator;
      this.update.productType = row.productType;
      this.update.material = row.material;
      this.update.remark = row.remark;

    },
    //订单基本数据
    requestData(currentPage) {
      let _this = this;
      request({
        url: 'batch/query',
        params: {
          key: _this.search,
          pages: currentPage,
          num: 10
        },
      }, res => {
        _this.tableData = res.data.records;
        _this.pages = res.data.pages * 10;
        for (let i = 0; i < res.data.total; i++) {
          _this.tableData[i].createTime = _this.tableData[i].createTime.toString().replace('T', ' ').slice(0, 19);
          _this.tableData[i].updateTime = _this.tableData[i].updateTime.toString().replace('T', ' ').slice(0, 19);
        }
        console.log(res);
      }, err => {
        console.log(err);
      });
    },
    //原材料名字
    requestMaterialData(){
      let _this = this;
      request({
          url: 'material/query',
          params: {
            key: '',
            pages: 1,
            num: 100
          },
        },
        res => {
          _this.update.material_category = [];
          for (let i = 0; i < res.data.records.length; i++) {
            _this.update.material_category[i] = {};
            _this.update.material_category[i].label = res.data.records[i].alias;
            _this.update.material_category[i].value = res.data.records[i].id;
          }
        },
        err => {
          console.log(err);
        });
    },
    //产品类别名字
    requestProductCategoryData(){
      let _this = this;
      //商品分类
      request({
          url: 'productCategory/query',
          params: {
            key: '',
            pages: '1',
            num: 100
          },
        },
        res => {
          _this.update.product_category = [];
          for (let i = 0; i < res.data.records.length; i++) {
            _this.update.product_category.push(res.data.records[i].name);
          }
        },
        err => {
          console.log(err);
        })
    },
  },
  created() {
    this.requestData(1);
    this.requestMaterialData();
    this.requestProductCategoryData();
  },
  data() {
    return {
      search:'',
      pages: null,
      tableData: null,
      dialogTableVisible: false,
      dialogFormVisible: false,
      update: {
        id: '',
        material: '',
        operator: '',
        completeTime: '',
        total: '',
        productType: '',
        material_category: '',
        product_category:'',
        remark: ''
      },
      formLabelWidth: '120px'
    }
  }
}
</script>
